<template>
  <div id="app">
    <cube-button
      class="cube-button-style"
      :outline="true"
      @click="toCallPage(1)"
      >横向滚动</cube-button
    >
    <cube-button
      class="cube-button-style"
      :outline="true"
      @click="toCallPage(2)"
      >纵向滚动</cube-button
    >
    <cube-button
      class="cube-button-style"
      :outline="true"
      @click="toCallPage(3)"
      >测试面板</cube-button
    >
    <cube-button
      class="cube-button-style"
      :outline="true"
      @click="toCallPage(4)"
      >测试颜色</cube-button
    >
    <router-view />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      msg: ''
    }
  },
  methods: {
    toCallPage(value) {
      switch(value) {
        case 1:
          this.$router.push({path: '/helloworld', query: {id: value, name: '横向滚动'}})
        break
      }
    }
  }
  // components: {
  //   HelloWorld
  // }
};
</script>

<style lang="stylus">
#app {
  padding: 16px;
  .cube-button-style {
    margin-top: 10px !important;
    border: 1px solid #eee;
  }
}
</style>
